<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			table {
				border-collapse: collapse;
			}

			th {
				background-color: whitesmoke;
			}

			td,
			th,
			table,
			tbody,
			thead {
				padding: 10px;
				border-color: #000;
			}
		</style>
	</head>
	<body>
		<input name="a1" id="a1" placeholder="学号" />
		<input name="a2" id="a2" placeholder="姓名" />
		<input name="a3" id="a3" placeholder="性别" />
		<button type="button" onclick="xinzeng()">新增</button>
		<table border="1">
			<thead>
				<th>学号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>党员</th>
				<th>高等数学</th>
				<th>大学英语</th>
				<th>计算机文化基础</th>
				<th>平均分</th>
			</thead>
			<tbody id="tb">
				<td>133</td>
				<td>133</td>
				<td>133</td>
				<td>133</td>
				<td>133</td>
				<td>133</td>
				<td>133</td>
				<td>133</td>
			</tbody>
		</table>
		<script type="text/javascript">
			var $ = function(name) {
				return document.querySelector(name)
			};
			var table_data = [{
					xuehao: "13310320712",
					username: "陈中华",
					sex: "男",
					dangyaun: "checked",
					math: "87",
					english: "83",
					computer: "94",
					ave:""
				},
				{
					xuehao: "13310320712",
					username: "陈中华",
					sex: "男",
					dangyaun: "",
					math: "87",
					english: "83",
					computer: "94",
					ave:""
				},
				{
					xuehao: "13310320712",
					username: "陈中华",
					sex: "男",
					dangyaun: "checked",
					math: "87",
					english: "83",
					computer: "94",
					ave:""
				},
				{
					xuehao: "13310320712",
					username: "陈中华",
					sex: "男",
					dangyaun: "",
					math: "87",
					english: "83",
					computer: "94",
					ave:""
				},
				{
					xuehao: "13310320712",
					username: "陈中华",
					sex: "男",
					dangyaun: "checked",
					math: "87",
					english: "83",
					computer: "94",
					ave:""
				},
				{
					xuehao: "13310320712",
					username: "陈中华",
					sex: "女",
					dangyaun: "",
					math: "87",
					english: "83",
					computer: "94",
					ave:""
				}
			];
			window.onload = user_data(table_data);
			function user_data(table_data) {
				var html = "";
				for (i = 0; i < table_data.length; i++) {
					var data = table_data[i];
					var ave = (data.math + data.english + data.computer)/3;
					console.log(ave);
					html +=
						"<tr>" +
						"<td>" + data.xuehao + "</td>" +
						"<td>" + data.username + "</td>" +
						"<td>" + data.sex + "</td>" +
						"<td><input type = 'checkbox' value = " + i + " " + data.dangyaun + "/></td>" +
						"<td>" + data.math + "</td>" +
						"<td>" + data.english + "</td>" +
						"<td>" + data.computer + "</td>" +
						"<td>" + ave + "</td>" +
						"</tr>";
				}
				var tbody = $("#tb");
				tbody.innerHTML = html;
			};

			function xinzeng() {
				var a1 = $("#a1").value;
				var a2 = $("#a2").value;
				var a3 = $("#a3").value;

				var xinzeng_data = {
					xuehao: a1,
					username: a2,
					sex: a3,
					dangyaun: "",
					math: "87",
					english: "83",
					computer: "94"
				};
				table_data.push(xinzeng_data);

				user_data(table_data);
			}
			
			
		</script>
	</body>
</html>
